//获取试卷并跳转到添加题库
<template>
  <div class="exam">
    <ul class="top">

      <li class="search-li">
        <div class="icon"><input type="text" placeholder="试卷名称" class="search" v-model="key"></div>
      </li>
      <li><el-button type="warning" @click="search()">搜索</el-button></li>
    </ul>
    <el-table :data="pagination.records" border fit stripe>
      <el-table-column fixed="left" prop="source" label="试卷名称" width="180"></el-table-column>
      <el-table-column prop="institute" label="所属学院" :span="8"></el-table-column>
      <el-table-column prop="major" label="所属专业" :span="6"></el-table-column>
      <el-table-column prop="grade" label="年级" width="100"></el-table-column>
      <el-table-column prop="examDate" label="考试日期" width="120"></el-table-column>
    
      <el-table-column fixed="right" label="操作" width="150">
        <template slot-scope="scope">
          <el-button @click="add(scope.row.paperId,scope.row.source)" type="warning" size="small">新增试题</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="pagination.current" :page-sizes="[4, 8, 10, 20]" :page-size="pagination.size"
      layout="total, sizes, prev, pager, next, jumper" :total="pagination.total" class="page">
    </el-pagination>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        form: {}, //保存点击以后当前试卷的信息
        pagination: { //分页后的考试信息
          current: 1, //当前页
          total: null, //记录条数
          size: 4 //每页条数
        },
        key: ''
      }
    },
    created() {
      this.getExamInfo()
    },
    methods: {
      getExamInfo() { //分页查询所有试卷信息
        this.$axios(`/api/exams/${this.pagination.current}/${this.pagination.size}`).then(res => {
          this.pagination = res.data.data
        }).catch(error => {
        })
      },
      search() {
        this.$axios(`/api/exams/1/200`).then(res => {
          

          var startIndex = (this.pagination.current - 1) * this.pagination.size;
          var endIndex = startIndex + this.pagination.size;
          let newPage = res.data.data.records.filter(item => {
            return item.source.includes(this.key)
          })
          console.log(newPage);
          

          this.pagination.records = newPage.slice(startIndex, endIndex)
          this.pagination.total = newPage.length
        })
      },
      //改变当前记录条数
      handleSizeChange(val) {
        this.pagination.size = val
        this.getExamInfo()
      },
      //改变当前页码，重新发送请求
      handleCurrentChange(val) {
        this.pagination.current = val
        this.getExamInfo()
      },
      add(paperId, source) { //增加题库
        this.$router.push({ path: '/addAnswerChildren', query: { paperId: paperId, subject: source } })
      }
    },
  };
</script>
<style lang="less" scoped>
  .exam {
    padding: 0px 40px;

    .page {
      margin-top: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .edit {
      margin-left: 20px;
    }
  }

  .top {

    display: flex;
    justify-content: center;
    margin: 20px 0;
    height: 90px;
  }

  .top .order {
    cursor: pointer;
  }

  .top .order:hover {
    color: #0195ff;
    border-bottom: 2px solid #0195ff;
  }

  .top .order:visited {
    color: #0195ff;
    border-bottom: 2px solid #0195ff;
  }

  .top .el-icon-search {
    position: absolute;
    right: 10px;
    top: 10px;
  }

  .top .icon {
    position: relative;
  }

  .wrapper .top {
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
  }

  .search-li {
    margin-left: auto;
    padding-left: 740px;
  }

  .top .search-li {
    margin-left: auto;
  }

  .top li {
    display: flex;
    align-items: center;
    margin: 0 10px;
  }

  .top .search {
    margin-left: auto;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #eee;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  }

  .top .search:hover {
    color: #0195ff;
    border-color: #0195ff;
  }
</style>